<template>
  <view class="search">
    <!-- 头部 -->
    <view class="top-top">
      <view class="topbox">
        <view class="top-oneitem"></view>
        <view class="top-twoitem">
          <u-search placeholder="请输入关键词" v-model="value" :showAction="false"></u-search>
          <view class="cancel" @click="toChatMessage()">取消</view>
        </view>
      </view>
    </view>
    <view style="height: 175rpx;"></view>
    <!-- 头部 -->
    <!-- 内容 -->
    <view class="content">
      <view class="content-top">
        最近在搜
      </view>
      <view class="content-chat">
        <view class="char-left">
          <view class="chat-item-left">
            <view class="chat-tit">
              王阿萨德
            </view>
            <view class="chat-image">
              <image src="../../static/message/more.png" mode=""></image>
            </view>
          </view>
          <view class="chat-item-left">
            <view class="chat-tit">
              下载
            </view>
            <view class="chat-image">
              <image src="../../static/message/more.png" mode=""></image>
            </view>
          </view>
        </view>
        <view class="char-right">
          <view class="chat-item-left">
            <view class="chat-tit">
              草莓采摘
            </view>
            <view class="chat-image">
              <image src="../../static/message/more.png" mode=""></image>
            </view>
          </view>
          <view class="chat-item-left">
            <view class="chat-tit">
              天
            </view>
            <view class="chat-image">
              <image src="../../static/message/more.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: '你',
      };
    },
    methods: {
      toChatMessage() {
        uni.navigateBack({
          delta: 1
        })
      },
    }
  }
</script>

<style lang="scss">
  .search {

    // 头部
    .top-top {
      width: 100vw;
      z-index: 99;
      position: fixed;
      top: 0;
      background-color: white;

      .topbox {
        width: 90vw;
        margin: auto;

        .top-oneitem {
          width: 100%;
          height: var(--status-bar-height);
        }

        .top-twoitem {
          height: 100rpx;
          width: 100%;
          display: flex;
          align-items: center;

          .cancel {
            color: #0096FA;
            margin-left: 20rpx;
          }
        }
      }
    }

    // 头部
    // 内容
    .content {
      width: 90vw;
      margin: 0 auto;

      .content-top {
        border-bottom: 2px solid #D8D8D8;
        color: #969696;
        font-size: 36rpx;
        padding-bottom: 15rpx;
      }

      .content-chat {
        width: 80vw;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .char-left {
          .chat-item-left {
            display: flex;
            margin: 20rpx 0;

            .chat-tit {
              color: #B9B9B9;
              font-size: 32rpx;
              margin-right: 20rpx;
            }

            .chat-image {

              image {
                width: 12rpx;
                height: 24rpx;
                vertical-align: middle;
              }
            }
          }
        }

        .char-right {
          .chat-item-left {
            display: flex;
            margin: 20rpx 0;

            .chat-tit {
              color: #B9B9B9;
              font-size: 32rpx;
              margin-right: 20rpx;
            }

            .chat-image {

              image {
                width: 12rpx;
                height: 24rpx;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }

    // 内容
  }
</style>